/*
 * @Description: 长文本Tooltip
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-22 20:59:09
 * @LastEditTime: 2021-07-23 10:49:28
 */
import { defineComponent, ref, unref } from 'vue'
import { Tooltip } from 'ant-design-vue'
import PropTypes from '@/types/vue-type'
import './index.less'
import Title from 'ant-design-vue/lib/typography/Title'

const EllipsisTooltip = defineComponent({
	name: 'ellipsis-tooltip',
	props: {
		title: PropTypes.string,
		mouseEnterDelay: PropTypes.number,
		inco:PropTypes.string,
	},
	setup(props) {
		const visible = ref(false)
		const contentRef = ref<ElRef>(null)
		const widthRef = ref(0)

		const handleChangeVisible = (value: boolean) => {
			const contentEl = unref(contentRef)
			if (contentEl && value) {
				const contentClientWidth = unref(contentRef)?.clientWidth
				const contentScrollWidth = unref(contentRef)?.scrollWidth
				widthRef.value = contentScrollWidth || 0
				if (
					contentClientWidth &&
					contentScrollWidth &&
					contentScrollWidth <= contentClientWidth
				) {
					visible.value = false
					return
				}
			}

			visible.value = value
		}
		return {
			visible,
			contentRef,
			handleChangeVisible,
			widthRef,
		}
	},
	render() {
		const { $props, $slots, visible, handleChangeVisible } = this
		let { widthRef } = this
		widthRef = widthRef > 200 ? 200 : widthRef
		const overlayStyle = { 'min-width': widthRef + 10 + 'px' }
		const myClasses=[$props.inco,"iconfont"]
		return (
			<section class="pok-ellipsis-tooltip">
				<Tooltip
					title={$props.title}
					visible={visible}
					overlayClassName="pok-ellipsis-overlay"
					onVisibleChange={handleChangeVisible}
					overlayStyle={overlayStyle}
					mouseEnterDelay={$props.mouseEnterDelay}
				>
					{$slots.default ? (
						$slots.default()
					) : (
						<div class="tooltip-content" ref="contentRef">
							<i class={myClasses.join(' ')} style="    margin-right: 7px;" />
							{$props.title}
						</div>
					)}
				</Tooltip>
			</section>
		)
	},
})

export default EllipsisTooltip
